<template>
  <views class="role_managen_look">
    <!-- 角色管理-查看 -->
    <!-- 角色名称 -->
    <div class="character_name flex flexR">
      <div class="character_name_title Textl">角色名称:</div>
      <div class="character_name_input">
        <el-input v-model="form.role_name" placeholder=""  disabled :clearable="true"></el-input>
      </div>
    </div>
    <!-- 状态 -->
    <div class="flex flexR state_list">
      <div class="character_name_title">状态:</div>
      <div class="flex state_list_btn">
        <el-radio-group v-model="form.status" disabled>
          <el-radio label="0">启用</el-radio>
          <el-radio label="1">禁用</el-radio>
        </el-radio-group>
      </div>
    </div>
    <!-- 备注 -->
    <div class="flex flexR remark_list">
      <div class="remark_name_title">备注:</div>
      <div class="remark_name_textarea">
        <el-input type="textarea" :rows="3" placeholder="" disabled v-model="form.remark"></el-input>
      </div>
    </div>
    <!-- 授权 -->
    <div class="flex flexR impower_list">
      <div class="impower_list_title">授权</div>
      <div class="impower_list_tree">
        <el-tree
          :data="data"
          show-checkbox
          default-expand-all
          node-key="permission_id"
          ref="tree"
          highlight-current
          :props="defaultProps"
        ></el-tree>
      </div>
    </div>
    <!-- 确定 返回 -->
    <div class="btn_list flex flexR">
           <el-button type="" @click="get_back">返回</el-button>
    </div>
  </views>
</template>


<script>
export default {
  data() {
    return {
      form:{
          role_name: "", // 角色名称
          status: "", // 状态
          remark: "", // 备注
      },
      defaultProps: {
          children: "list",
          label: "permission_name",
          disabled: () =>{return true}
      },
      data: []
    };
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: "region" }]);
      }
      if (node.level > 1) return resolve([]);

      setTimeout(() => {
        const data = [
          {
            name: "leaf",
            leaf: true
          },
          {
            name: "zone"
          }
        ];

        resolve(data);
      }, 500);
    },
    // 返回
    get_back(){
         this.$blackRoute({ path: '/role_managen',query:{},that:this});                 // 返回指定路由-删除标题栏
    },
    //获取数据
    getData(){
        // this.role_id =    this.$route.query.role_id;
        console.log('ssss',this.$store.state.terrace);
        if(this.$store.state.terrace==1){
            this.getEnterpriseData();
        }
        if(this.$store.state.terrace==2){
            this.getAgentData();
        }
        if(this.$store.state.terrace==3){
            this.getFacilitatorData();
        }
        this.form.status = this.form.status.toString();
    },
    getEnterpriseData(){
        let {code , msg, data} = this.$api.sendSync(this.$mapapi.egetRoleDetail,{
            role_id:this.$route.query.role_id
        });
        if(code != 200&&code!=501){
            this.$message.error(msg);
            return;
        }
        this.data = data.permissions;
        this.form.role_name = data.enterprise_role_name
        this.form.status = data.status;
        this.form.remark = data.remarks
        // 设置选中的
        console.log('this.getActivePerm(data.permissions)',this.getActivePerm(data.permissions));
        this.$refs.tree.setCheckedKeys(this.getActivePerm(data.permissions));
    },
    getAgentData(){
        let {code , msg, data} = this.$api.sendSync(this.$mapapi.agetRoleDetail,{
            role_id:this.$route.query.role_id
        });
        if(code != 200&&code!=501){
            this.$message.error(msg);
            return;
        }
        this.data = data.permissions;
        this.form.role_name = data.agent_role_name
        this.form.status = data.status;
        this.form.remark = data.remarks
        // 设置选中的
        console.log('this.getActivePerm(data.permissions)',this.getActivePerm(data.permissions));
        this.$refs.tree.setCheckedKeys(this.getActivePerm(data.permissions));
    },
    getFacilitatorData(){
        let {code , msg, data} = this.$api.sendSync(this.$mapapi.fgetRoleDetail,{
            role_id:this.$route.query.role_id
        });
        if(code != 200&&code!=501){
            this.$message.error(msg);
            return;
        }
        this.data = data.permissions;
        this.form.role_name = data.facilitator_role_name
        this.form.status = data.status;
        this.form.remark = data.remarks
        // 设置选中的
        console.log('this.getActivePerm(data.permissions)',this.getActivePerm(data.permissions));
        this.$refs.tree.setCheckedKeys(this.getActivePerm(data.permissions));
    },
    getActivePerm(perm_arr){
        let act_item = [];
        if(perm_arr.length > 0 ){
            for(let perm_obj of perm_arr){
                if(perm_obj.is_active){
                    act_item.push(perm_obj.permission_id) && (act_item =  act_item.concat(this.getActivePerm(perm_obj.list||[])));
                }
            }
        }
        return act_item;
    }
  },
  mounted() {
    this.$setRouteTitle();
    // 设置选中的
    this.getData()
  },
  created() {}
};
</script>


<style lang="less"  :scope="true">
.role_managen_look {
  padding: 10px 10px 20px 10px;
  background: #ffffff;

  .btn_list{
      margin-top: 25px;
      margin-left: 55px;
      width: 200px;
      justify-content: space-around;
  }


  .impower_list {

    width: 550px;
    margin-top: 15px;
    .impower_list_title {
      width: 130px;
      text-align: right;
    }
    .impower_list_tree {
      margin-left: 15px;
    }
  }
  .remark_list {
    -moz-box-align: center;
    -webkit-box-align: center;
    // -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -moz-box-pack: center;
    -webkit-box-pack: center;
    // -ms-flex-pack: center;
    width: 550px;
    margin-top: 15px;
    .remark_name_title {
      width: 130px;
      text-align: right;
    }
    .remark_name_textarea {
      margin-left: 15px;
      width: 100%;
    }
  }
  .state_list {
    height: 55px;
    -moz-box-align: center;
    -webkit-box-align: center;
    // -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -moz-box-pack: center;
    -webkit-box-pack: center;
    // -ms-flex-pack: center;
    width: 550px;
    .character_name_title {
      width: 130px;
      text-align: right;
    }
    .state_list_btn {
      margin-left: 15px;
    }
  }
  .character_name {
    height: 55px;
    -moz-box-align: center;
    -webkit-box-align: center;
    // -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -moz-box-pack: center;
    -webkit-box-pack: center;
    // -ms-flex-pack: center;
    width: 550px;
    .character_name_input {
      margin-left: 15px;
      width: 100%;
    }
    .character_name_title {
      width: 130px;
      text-align: right;
    }
    .character_name_title:before {
      content: "*";
      color: red;
    }
  }
}
</style>